<template>
    <div class="edit-popup" style="width: 100%">
        <!-- <popup
            ref="popupRef"
            :title="user_type == 1 ? '切换团长' : '切换代理'"
            :async="true"
            width="50vw"
            @confirm="handleSubmit"
            @close="handleClose"
        > -->
            <div class="popup-div">
                <div class="popup-div-title">
                    <el-form ref="formRef" :model="formData" :inline="true">
                        <el-form-item :label="user_type == 1 ? '团长ID' : '代理ID'">
                            <el-input
                                class="w-[160px]"
                                v-model="formData.verify_remark"
                                placeholder="请输入用户搜索"
                                clearable
                                @keyup.enter="resetPage"
                            />
                        </el-form-item>
<!--                        <el-form-item label="注册时间">-->
<!--                            <daterange-picker-->
<!--                                v-model:startTime="queryParams.start_time"-->
<!--                                v-model:endTime="queryParams.end_time"-->
<!--                            />-->
<!--                        </el-form-item>-->
                        <el-form-item>
                            <el-button @click="resetParams" type="primary">查询</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="table-div" style="overflow-y: auto">
                    <el-table :data="tableData">
                        <el-table-column label="用户信息" prop="nickname" min-width="200">
                            <template #default="{ row }">
                                <div class="flex flex-row items-center gap-2">
                                    <div>
                                        <el-avatar :src="row.headimg" :preview-src-list="[row.headimg]" style="height: 60px; min-width: 60px"/>
                                    </div>
                                    <div>
                                        <div v-for="(item, index) in userInfo1" :key="index">
                                            <span>{{item.title}}：</span>
                                            <span style="color: #2494f2">{{row[item.key]}}</span>
                                        </div>
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="用户状态" prop="nickname" min-width="200">
                            <template #default="{ row }">
                                <div v-for="(item, index) in userState" :key="index">
                                    <span>{{item.title}}：</span>
                                    <span style="color: #2494f2">{{row[item.key]}}</span>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作面板" min-width="160" fixed="right">
                            <template #default="{ row }">
                                <el-popconfirm title="确认切换团长吗？"
                                   confirm
                                   @confirm="handleSubmit(row.id)"
                                >
                                    <template #reference>
                                        <el-button
                                            type="success"
                                        >
                                            确认切换
                                        </el-button>
                                    </template>
                                </el-popconfirm>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <!-- 分页 -->
                <div class="flex justify-end mt-4">
                    <pagination v-model="pager" @change="getLists" />
                </div>
            </div>
        <!-- </popup> -->
    </div>
</template>
<script lang="ts" setup>
    import { usePaging } from '@/hooks/usePaging'
    import { getCommunityList, toggleCommunity, getAgentList, toggleAgent} from '@/api/consumer'
    import { userInfo1, userState  } from "./data.js";
    import type { FormInstance } from 'element-plus'
    // import { aftersaleRefuse } from '@/api/order'
    import Popup from '@/components/popup/index.vue'
    const emit = defineEmits(['success', 'close'])
    const formRef = shallowRef<FormInstance>()
    const popupRef = shallowRef<InstanceType<typeof Popup>>()
    const route = useRoute();
    import { useAttrs } from 'vue'



    const props = defineProps({     //接收父组件传过来的参数
        rankName: {
            type: String,
        },
    })


    const formData = reactive({
        id: route.query.id,
        verify_remark: '',
    });

    const tableData = ref([]);

    const queryParams = reactive({
        uuid: '',
        page: '1',
        limit: '10',
    });

    // 设置数据
    const user_id = ref('0');
    const user_type = ref(props.rankName === '团长' ? 1: 2);  // 1 团长  2 代理


    console.log(user_type.value)
    const { pager, getLists, resetPage, resetParams } = usePaging({
        fetchFun: user_type.value == 1 ? getAgentList : getCommunityList,
        params: queryParams
    });



    // 打开弹窗
    const open = () => {
        popupRef.value?.open();
    };

    // 取消弹窗
    const handleClose = () => {
        emit('close', 0)
    };

    const setFormData = (id:string, type: number) => {
        user_id.value = id;
        // queryParams.uuid = id;
        user_type.value = type;
        getLists().then((res) => {
            tableData.value = res.list
        });
    };

    //提交
    const handleSubmit = async (id: string) => {
        if (typeof(user_type) === "number" && user_type == 1) {
            await toggleAgent({agent_id: user_id, uuid: id})
        } else {
            await toggleCommunity({community_id: user_id, uuid: id})
        }
        emit('close', 1)
    };

    defineExpose({
        open,
        setFormData
    });
</script>

<style lang="scss" scoped>
    .popup-div {
        height: 60vh;
        display: flex;
        flex-direction: column;
        .popup-div-title {
            position: sticky;
            top: 0;
            z-index: 999;
            background-color: #ffffff
        }
    }
</style>
